<template>
  <div class="hello">
    <swiper :list="bannerList" :dots-position="'left'" :dots-class="'dots'" :show-desc-mask="false" :loop="true" :auto="true"></swiper>
    <div class="vr-middle">
      <main class="vr-content">
        <div class="tip tip-black">
          <div>VR全屋装</div>
          <div>所见即所得</div>
        </div>
        <div class="tip tip-white">
          <div>区别于传统装修公司，我们提供整套的</div>
          <div>VR全景方案100%还原未来新家</div>
        </div>
        <div class="vr-more">
          <button class="vr-btn" @click="more">
            了解更多&nbsp;<embed :src="arrow2">
          </button>
          <div class="out3">
            <div class="out2">
              <div class="out1">
                <div class="vr-circle" @click="more">
                  <embed :src="arrow1">
                </div>
              </div>
            </div>
          </div>
          <div class="tip tip-gray">
            360旋转<br>
            VR全套方案<br>
            所见即所得
          </div>
        </div>
      </main>
      <img :src="vr" class="vr-img" ref="img">
      <div class="info" ref="info">
        <div>现在预约</div>
        <hr class="info-hr">
        <div class="tip tip-hr">免费获得客厅VR全景方案</div>
        <div>
          <select v-model="form.layoutSelected">
            <option
              v-for="layout in layouts"
              :value="layout.id"
              :key="layout.id">
              {{layout.name}}
            </option>
          </select>
          <select name="" id="" v-model="form.citySelected">
            <option
              v-for="city in cities"
              :value="city.id"
              :key="city.id">
              {{city.name}}
            </option>
          </select>
          <input type="text" placeholder="所在小区" v-model="form.addr">
          <button class="info-btn" @click="submit">立即预约</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper } from 'vux'
import vr from '../assets/vr@3.png'
import banner1 from '../assets/banner1@3.png'
import banner2 from '../assets/banner2@3.png'
import arrow1 from '../assets/logo_arrow1.svg'
import arrow2 from '../assets/logo_arrow2.svg'

const bannerList = [
  {
    url: '##',
    img: banner1
  },
  {
    url: '##',
    img: banner2
  },
  {
    url: '##',
    img: banner1
  },
  {
    url: '##',
    img: banner2
  }
]

const layouts = [{
  name: '毛坯房',
  id: '1'
}]

const cities = [{
  name: '杭州',
  id: '1'
}]

export default {
  name: 'HelloInMeiJia',
  data () {
    return {
      bannerList: bannerList,
      vr: vr,
      arrow1: arrow1,
      arrow2: arrow2,
      layouts: layouts,
      cities: cities,
      form: {
        layoutSelected: 1,
        citySelected: 1,
        addr: ''
      }
    }
  },
  components: {
    Swiper
  },
  methods: {
    more: function () {
      window.scrollTo(0, document.body.scrollHeight)
    },
    submit: function () {
      var counter = 0
      var len = 0
      for (let v in this.form) {
        len++
        if (!this.form[v]) {
          return
        } else {
          counter++
        }
      }
      if (counter === len) {
        this.$http.post('/', {
          params: {
            form: this.form
          }
        }).then(function (response) {
          console.log(response)
        }).catch(function (error) {
          console.log(error)
        })
        counter = 0
      } else {
        alert('您还有未填写的信息')
      }
    }
  }
}
</script>

<style lang="postcss">
@import url('../css/diffusion.css');

.dots {
  & i {
    background-color: #fff !important;
    border: 1px solid #666;
    border-radius: 50% !important;
    width: 5px !important;
    height: 5px !important;
  }

  & .active {
    background-color: #666 !important;
  }
}

@cn vr {
  @c middle {
    box-sizing: border-box;
    padding-top: 82px;
    position: relative;
  }

  @c img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;

    &::after {
      content: "";
      position: relative;
    }
  }

  @c content {
    margin-left: 52px;
  }

  @c more {
    position:relative;
    margin-top: 44px;

    & .out3 {
      position: absolute;
      top:0px;
      right:60px;
      display: flex;
      justify-content: center;
      align-items: center;
      width:90px;
      height: 90px;
      border: 1px solid #39d5c2;
      border-radius: 50%;
      animation: diffusion3 4s linear 0s infinite;
    }

    & .out2 {
      display: flex;
      justify-content: center;
      align-items: center;
      width:70px;
      height: 70px;
      border: 1px solid #39d5c2;
      border-radius: 50%;
      animation: diffusion2 4s linear 0s infinite;
    }

    & .out1 {
      display: flex;
      justify-content: center;
      align-items: center;
      width:50px;
      height: 50px;
      border: 1px solid #39d5c2;
      border-radius: 50%;
      animation: diffusion1 4s linear 0s infinite;
    }
  }

  @c btn {
    font-family: "PingFangSC-Regular", sans-serif;
    font-size: 12px;
    color: #333;
    box-sizing: border-box;
    width: 100px;
    height: 32px;
    line-height: 32px;
    padding: 0 18px;
    border: 1px solid #666;
    border-radius: 16px;
    background-color: #fafafa;
    white-space: nowrap;
    outline: none;

    &:active {
      background-color: #aaa;
    }
  }

  @c circle {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #39d5c2;
    width: 30px;
    height: 30px;
    z-index: 9;
  }
}

@c tip {
  font-family: "PingFangSC-Regular", sans-serif;
}

@cn tip {
  @c black {
    position: relative;
    font-size: 24px;
    color: #333;

    &::before {
      content: "VR";
      display: inline-block;
      font-family: "HelveticaNeue-CondensedBold", sans-serif;
      font-size: 7px;
      color: #6f727c;
      transform: rotate(-90deg);
      position: absolute;
      top: -30px;
    }

    & div:last-child:first-letter {
      padding-bottom: 15px;
      border-bottom: 1px solid #149a91;
    }
  }

  @c white {
    color: #b3b3b3;
    font-size: 12px;
    margin-top: 39px;
  }

  @c gray {
    color: #999;
    font-size: 13px;
    position: absolute;
    right: 10px;
  }

  @c hr {
    color: #b3b3b3;
    font-size: 12px;
    margin-bottom: 40px;
  }
}

@c info {
  margin: 0 52px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 540px;

  & select, & input {
    width: 100%;
    margin-bottom: 20px;
    height: 36px;
    border: none;
    outline:none;
  }

  & button {
    width: 100%;
    margin-bottom: 60px;
    height: 36px;
    border: none;
    outline: none;
  }
}

@cn info{
  @c hr {
    width: 20px;
    background-color: #149a91;
    margin:12px auto;
  }
  @c btn {
    color: #fff;
    font-size: 14px;
    background-color: #149a91;
    border: none;

    &:active {
      background-color: #fff;
      color: #149a91;
    }
  }
}

</style>
